<template>
  <div class="main">
    <el-tooltip 
      v-for="(item,index) in routerList"
      :key="`menu-${index}`"
      :content="item.title" 
      placement="right" 
      effect="dark"
    >
      <li
        :style="{top:index*10+20+'%'}"
        @mouseenter="hoverindex = index"
        @mouseleave="hoverindex = chooseindex"
        @click="router.push({name:item.name})"
      >
        <el-icon :size="24" :color="hoverindex === index?'#000':'#fff'">
          <component :is="item.icon"></component>
        </el-icon>
      </li>
    </el-tooltip>
    <div class="top" :style="{height:hoverindex*10+20+'%'}"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="h-full w-full bg-green-50" :class="{'p-3':!nopadding}">
    <router-view ></router-view>
  </div>
</template>

<script lang="ts" setup >
import { computed, ref } from "vue";
import { HomeFilled,Avatar,ChatLineSquare,PieChart,
Coordinate,Setting } from '@element-plus/icons'
import { useRouter,useRoute } from "vue-router";
const routerList = [
  {title:'首页',icon:HomeFilled,name:'homepage'},
  {title:'用户管理',icon:Avatar,name:'usermanager'},
  {title:'比赛管理',icon:Coordinate,name:'ctmanager'},
  {title:'消息',icon:ChatLineSquare,name:'message'},
  {title:'统计分析',icon:PieChart,name:'chart'},
  {title:'设置',icon:Setting,name:'setting'},
]

const router = useRouter()

const route = useRoute()
console.log({route})
const chooseindex = computed(()=>{
  const name = route.fullPath.split("/")[2]
  return routerList.findIndex(e=>e.name==name)
})

const hoverindex = ref(0)
hoverindex.value = chooseindex.value//初始化
// const padding

const nopadding = computed(()=>route.meta.nopadding)
console.log({nopadding})

</script>


<style lang="scss" scoped>
$eastouttime:0.5s;
$menuwidth:100px;
$leftwdith:20px;
$borderradio:20px;

$leftcolor:#fafafa; //隐藏的时候也取决于这个颜色
$rightcolor:#a9a9a9;
$transconf:all 0.3s ease-out $eastouttime;

.main {
  position: fixed;
  left: 0px;
  top: 50%;
  z-index: 9999999;
  transform: translate(0%, -50%);
  background: $rightcolor;
  backdrop-filter: blur(3px);
  overflow: hidden;
  transition: 0.4s ease-out $eastouttime;
  li {
    transition:$transconf;
    position: absolute;
    width: 100%;
    height: 60%;
    font-size: 30px;
    height: 10%;
    color: #0000;
    box-sizing: border-box;
    justify-content: center;
    display: flex;
    align-items: center;
    cursor: pointer;
    i{
      color:#0000;
      transition:$transconf;
    }
  }
  width: 10px;
  height: 600px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  &:hover {
    width: $menuwidth;
    border-top-right-radius: $borderradio;
    border-bottom-right-radius: $borderradio;
    li i{
      color:var(--color);
    }
  }
  &::before {
    width: $leftwdith;
    height: 100%;
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    background: $leftcolor;
    transition:$transconf;
  }
  &::after {
    width: $borderradio;
    height: 100%;
    position: absolute;
    content: "";
    z-index: -1;
    left: $leftwdith;
    top: 0;
    background: $leftcolor;
  }
  .top {
    margin-left:$leftwdith;
    height: 20%;
    background: $rightcolor;
    transition:all .3s;
    top: 0;
    border-bottom-left-radius: $borderradio;
    left: 0;
    transition: 0.2s linear;
  }
  .middle {
    height: 10%;
    width: calc(100% / 5 * 4 - $leftwdith);
    background: $leftcolor;
    margin-left:$leftwdith;
    border-radius:0 20px 20px 0;
  }
  .bottom {
    width: calc(100% - $leftwdith);
    height: 100%;
    border-top-left-radius: $borderradio;
    margin-left: $leftwdith;
    background: $rightcolor;
  }
}
</style>